<template>
  <div>
    <div id="main" style="height: 350px"></div>
  </div>
</template>
<script>
// import echarts from "echarts";
// let myChart = echarts.init(document.getElementById("main"));
export default {
  name: "APP",
  components: {},
  data() {
    return {};
  },
  props: {
    option: {
      type: Object,
    },
  },
  methods: {
    drawChart() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
      // myChart.resize();
      // let that = this;
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦 */
    window.removeEventListener("resize", function () {
      this.myChart.resize();
    });
  },
  created() {},
  mounted() {
    this.drawChart();
  },
};
</script>
<style  scoped>
#main {
  width: 100%;
  height: 350px;
  /* border: 1px red solid; */
}
</style>
